<template>
  <div class="bg">
    <div class="detailsList" :class="statusText[item.status][0]" v-for="(item,index) in arrList" :key="index"
      v-if="item.jobOutVo.id">
      <div class="describe nameStatus">
        <span class="jobName">
          <div class="name">
            <!-- <a :href="ENV.BASE_URL+'/JobHunting/jobdetail/?'+ JSON.stringify(item)"> 暂不做跳转,跳转页面有问题-->
            <a target="_bank"
              :href="'/#/JobHunting/jobdetail?id=' + item.jobId+'&category='+item.jobOutVo.category">{{item.jobOutVo.name || '暂无'}}</a>
            <!-- </a> -->
          </div>
        </span>
        <span class="tdStatus" :class="statusText[item.status][1]">{{item.statusText}}</span>
        <!-- {{statusText[item.status][2]}} -->
      </div>
      <div class="ageAdress">
        <span class="salary">{{item.jobOutVo.wageText}}</span>
        <p class="area">
          <span class="prev-line">{{item.jobOutVo.companyInfo? item.jobOutVo.companyInfo.areaText : '地区不限 '}}</span>
          <span class="prev-line">{{item.jobOutVo.workExpText || '经验不限  '}}</span>
          <span class="prev-line">{{item.jobOutVo.educationText || '学历不限  '}}</span>
        </p>
      </div>
      <div class="describe corporateTime">
        <span class="companyName">{{item.jobOutVo.companyInfo ? item.jobOutVo.companyInfo.name : '暂无'}}</span>
        <span class="time">{{item.createTime}}</span>
      </div>
    </div>
    <el-card class="noData" v-show="arrList.length<=0">
      暂无数据
    </el-card>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total" :hide-on-single-page="arrList<=0"
        :page-size="query.size" @current-change="currentChange" :current-page.sync="query.page">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import { deliverListPage, deliverSave, listPagesTj } from '../../../api/Mycollection';
export default {
  name: 'personalist',
  data () {
    return {
      ENV: process.env,
      // 数据列表 投递详情
      arrList: [],
      //   展示状态以及颜色样式
      statusText: {
        2: ['leftLine', 'yck', '已查看'],
        5: ['inappropriate', 'bhs', '不合适'],
        3: ['leftLinered ', 'yyx', '有意向'],
        1: ['leftLine', 'yck', '投递成功'],
        4: ['leftLine', 'yqms', '邀请面试'],
      },
      //   查询条件
      query: {
        arr: [
          {
            column: 'user_id',
            type: 'eq',
            value: localStorage.getItem('ps_userId')
          },
          {
            column: 'status',
            type: 'eq',
            value: ''
          }
        ],
        sort: '',
        page: 1,
        size: 10
      },
      total: 1
    }
  },
  methods: {
    change (val) {
      console.log(val)
    },
    // 查询列表数据
    deliverListPage (val) {
      if (val) {
        this.query.arr[1].value = Number(val)
      } else {
        this.query.arr[1].value = ''
      }
      // this.query.arr[1].value = Number(val)
      var formData = new FormData()
      formData.append('page', this.query.page)
      formData.append('size', this.query.size)
      formData.append('condition', JSON.stringify(this.query.arr))
      deliverListPage(formData).then((res) => {
        if (res.success) {
          let data = res.data.records || []
          this.total = res.data.total
          this.arrList = data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 分页查询
    currentChange (val) {
      let active = ''
      this.query.page = val
      if (this.$parent.jobtypeStatusIndex) {
        active = this.$parent.jobtypeStatusIndex
      }
      this.deliverListPage(active)
    },
    // 申请管理 -  一键申请
    deliverSave () {
      //   [{ jobId: "7", companyId: "99be9bc7bf9f9d2d9cb7b83d99e8958a" }, { jobId: "4", companyId: "99be9bc7bf9f9d2d9cb7b83d99e8958a" }]
      let that = this
      let idArr = [
        {
          jobId: item.id,
          companyId: item.companyId
        }
      ]
      // that.checkedCities.map((item) => {
      //   idArr.push({
      //     jobId: item.jobId,
      //     companyId: item.companyId
      //   })
      // })
      var formData = new FormData()
      formData.append('dataJson', JSON.stringify(idArr))
      formData.append('userId', localStorage.getItem('ps_userId'))
      deliverSave(formData).then((res) => {
        if (res.success) {
          let data = res.data.records || []
          cosnole.log(data, '申请管理 -  一键申请')
          this.arrList = data || []
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 简历推荐查询列表
    listPagesTj () {
      var formData = new FormData()
      formData.append('page', 1)
      formData.append('size', 10)
      formData.append('condition', JSON.stringify({ "column": "include", "type": "", "value": "D,CI,F" }))
      listPagesTj(formData).then((res) => {
        if (res.success) {
          let data = res.data.records || []
          cosnole.log(data, '申请管理 -  推荐列表')
          this.arrList = data || []
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    selectResumePage () {
      let obj = {
        page: 1,
        size: 10
      }
      selectResumePage(obj).then((res) => {
        if (res.success) {
          let data = res.data
          console.log(data, '简历信息查询')
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
  created () {
    this.deliverListPage()
    // this.deliverSave()
    // this.selectResumePage()
  }
}
</script>

<style scoped>
.bg {
    /* background: #ffffff; */
}
.detailsList {
    height: 124px;
    width: calc(100% - 84px);
    margin-top: 16px;
    padding: 0 42px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 1);
    position: relative;
    border: 2px solid rgba(248, 248, 248, 1);
}
.leftLine::before {
    content: '';
    width: 8px;
    height: 124px;
    position: absolute;
    left: 0px;
    background: rgba(24, 147, 252, 1);
}
.inappropriate::before {
    content: '';
    width: 8px;
    height: 124px;
    position: absolute;
    left: 0px;
    background: rgba(153, 153, 153, 1);
}
.leftLinered::before {
    content: '';
    width: 8px;
    height: 124px;
    position: absolute;
    left: 0px;
    background: rgba(253, 78, 64, 1);
}
.describe {
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
}
.ageAdress {
    display: flex;
    justify-content: flex-start;
    height: 40px;
    align-items: center;
}
.jobName {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(51, 51, 51, 1);
}
.tdStatus {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 16px;
    color: rgba(0, 155, 62, 1);
}
.salary {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: rgba(253, 78, 64, 1);
}
.area {
    margin-left: 35px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
}
.area .prev-line:not(:first-child)::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    margin: -2px 10px 0;
    background-color: #707070;
}
.companyName {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(51, 51, 51, 1);
}
.time {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
}
.yck {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 16px;
    color: rgba(0, 155, 62, 1);
}
.bhs {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 16px;
    color: rgba(153, 153, 153, 1);
}
.yqms {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 16px;
    color: rgba(0, 147, 255, 1);
}
.yyx {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 16px;
    color: rgba(253, 78, 64, 1);
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 124px;
    text-align: center;
    /* background: #ffffff; */
}
.name a {
    font-size: 20px;
    color: #222222;
}
.noData {
    width: 100%;
    height: 50px;
    text-align: center;
}
</style>